<template>
  <div class="board-container">
    <Header />
    <div class="main-content">
      <div class="left-class">
        <!-- 存储设备 -->
        <div class="storage-device">
          <StorageDevice />
        </div>
        <!-- 保护客户端 -->
        <div class="protect-client">
          <ProtectClient />
        </div>
        <!-- 归档任务 -->
        <div class="archive-task">
          <ArchiveTask />
        </div>

      </div>
      <div class="right-class">
        <BlueRayDevice />
        <IncreaseDay />
        <BurnTask />

      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import StorageDevice from './components/StorageDevice.vue'
import ProtectClient from './components/ProtectClient.vue'
import ArchiveTask from './components/ArchiveTask.vue'
import BlueRayDevice from './components/BlueRayDevice.vue'
import IncreaseDay from './components/IncreaseDay.vue'
import BurnTask from './components/BurnTask.vue'
</script>

<style scoped lang="scss">
.board-container {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .main-content {
    display: flex;
    flex: 1;


    .left-class {
      flex: 5;
      border: 1px dashed lightblue;
      // background: linear-gradient(to right,
      //     rgba(0, 80, 255, 0.4) 0%,
      //     rgba(0, 180, 255, 0.1) 100%);
    }

    .right-class {
      flex: 5;
      // background: linear-gradient(to left,
      //     rgba(0, 80, 255, 0.4) 0%,
      //     rgba(0, 180, 255, 0.1) 100%);
      border: 1px lightgreen dashed;
    }
  }
}
</style>
